<template>
	<div>
		<h1>Home Page</h1>
		<p>Counter: {{ counter.count }}</p>
		<button @click="counter.increment()">Increment</button>

		<div v-if="counter.data">
			<h2>Fetched Data:</h2>
			<pre>{{ counter.data }}</pre>
		</div>
	</div>
</template>

<script lang="ts" setup>
	import {onMounted} from 'vue'
	import { useCounterStore } from '../stores/counter'

	const counter = useCounterStore()

	// 服务端预取数据
	if (import.meta.env.SSR) {
		await counter.fetchData()
	}

	// 客户端激活后获取数据
	onMounted(async () => {
		if (!import.meta.env.SSR) {
			await counter.fetchData()
		}
	})
</script>

<style>
</style>